<template>
  <div class="side-menu">
    <div 
      v-for="menu in menus" 
      :key="menu.key"
      class="menu-item"
      :class="{ 'active': activeKey === menu.key }"
      @click="$emit('menu-click', menu)"
    >
      {{ menu.title }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    menus: Array,
    activeKey: String
  }
}
</script>

<style scoped>
.menu-item {
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 4px;
  margin-bottom: 5px;
}

.menu-item:hover {
  background-color: #e6e6e6;
}

.menu-item.active {
  background-color: #4285f4;
  color: white;
}
</style>